Add Chart for limits set to vizualise limits distribution #2589
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
…bution of limits Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
basseche
force-pushed
the
graphique_LimitSets
branch
from
a644124 to
79113c7
Compare
basseche
changed the title
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Yes it's ok. The changes come from the transitive dependances (https://www.npmjs.com/package/@mui/x-charts?activeTab=dependencies) and the package-lock.json is not changed after I did npm install again. |
Co-authored-by: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com>
Co-authored-by: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com>
Co-authored-by: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com>
|
| export interface LimitsGraphProps { | ||
| limitsGroupFormName: string; | ||
| } | ||
| const colorIST = '#58d058'; |
There was a problem hiding this comment.
It seems an abbreviation in french, in general, abbreviation is not encouraged to use in code
| // threshold with biggest tempo and biggest value than the previous threshold | ||
| // more than one threshold without value | ||
| const isPermanentLimit = | ||
| (item.name === intl.formatMessage({ id: 'IST' }) && currentLimits.permanentLimit) || |
There was a problem hiding this comment.
to avoid using compare with formatted name, but can do later
| return thresholds.reduce<{ series: BarSeriesType[]; ticks: Ticks[] }>( | ||
| (acc, item, index) => { | ||
| const isPermanentLimit = | ||
| (item.name === intl.formatMessage({ id: 'IST' }) && currentLimits.permanentLimit) || |
There was a problem hiding this comment.
to avoid using compare with formatted name, but can do later
| thresholds.sort((a, b) => { | ||
| if (a.value && !b.value) { | ||
| return -1; | ||
| } | ||
| if (!a.value && !b.value && a.acceptableDuration && b.acceptableDuration) { | ||
| return a.acceptableDuration - b.acceptableDuration; | ||
| } | ||
| if (!a.value && b.value) { | ||
| return 1; | ||
| } | ||
| if (a.value && b.value) { | ||
| return a.value - b.value; | ||
| } | ||
| return 0; | ||
| }); |
There was a problem hiding this comment.
To extract outside of component
| const config = { | ||
| id: 'topAxis', | ||
| valueFormatter: (value: number, context: AxisValueFormatterContext) => | ||
| ticks.find((item: Ticks) => item.position === value)?.label, |
There was a problem hiding this comment.
can extract config outside of component
| const colorPermanentLimit = '#58d058'; | ||
| const colors: string[] = ['#ffc019', '#e47400', '#cc5500', '#ff5757', '#ff0000']; | ||
| const colorForbidden: string = '#b10303'; |
There was a problem hiding this comment.
to see with Stephan whether using mui palette colors
No description provided.